/** 退款申请 */
<template>
  <div class="add-refund-page">
    <el-card shadow="always">
      <div slot="header">
        <line-header title="申请退款"></line-header>
      </div>
      <div class="card-body">
        <el-form
          ref="form"
          :model="form"
          :rules="formRelus"
          label-width="100px"
        >
          <el-form-item label="企业名称：" prop="eName">
            <el-input
              v-model="form.eName"
              placeholder="请输入公司名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行账户：" prop="code">
            <el-input
              v-model="form.code"
              placeholder="请输入对公账户"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户行：" prop="bank">
            <el-input
              v-model="form.bank"
              placeholder="请输入对公账户开户行"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名：" prop="receiver">
            <el-input v-model="form.receiver" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话：" prop="contact">
            <el-input
              v-model="form.contact"
              placeholder="请输入公司官方联系方式"
            ></el-input>
          </el-form-item>
          <el-form-item label="可退金额：">
            <el-input v-model="balance1" placeholder="" disabled></el-input>
          </el-form-item>
          <el-form-item label="退款金额：" prop="amount">
            <el-input
              v-model="form.amount"
              placeholder="请输入金额"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div class="buttom-btn-box">
              <el-button type="primary" @click="hkClickSubmit"
                >提交申请</el-button
              >
              <el-button type="primary" plain @click="hkClickCancel"
                >取消</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import LineHeader from "@/components/line-header/index";
import {mapGetters} from "vuex"
import {trace} from "../../../utils/trace"

export default {
  components: { LineHeader },
  props: {},
  data() {
    return {
      form: {
        eName: "", //企业名称
        code: "", //银行账户
        bank: "", //开户行
        receiver: "", //姓名
        contact: "", //电话
        amount: "" //退款金额
      },
      formRelus: {
        eName: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: ["change", "blur"]
          }
        ],
        code: [
          {
            required: true,
            message: "请输入对公账户",
            trigger: ["change", "blur"]
          }
        ],
        bank: [
          {
            required: true,
            message: "请输入对公账户开户行",
            trigger: ["change", "blur"]
          }
        ],
        receiver: [
          {
            required: true,
            message: "请输入姓名",
            trigger: ["change", "blur"]
          }
        ],
        contact: [
          {
            required: true,
            message: "请输入公司官方联系方式",
            trigger: ["change", "blur"]
          }
        ],
        amount: [
          {
            required: true,
            message: "请输入金额",
            trigger: ["change", "blur"]
          }
        ]
      },
      balance1:0,
    };
  },
  watch: {},
  computed: {
    ...mapGetters([
      'balance',
    ]),


  },
  methods: {
    hkClickSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let {eName,code,bank,receiver,contact,amount} = this.form;
          amount = amount*100;
          this.$store.dispatch('finance/refund', {eName,code,bank,receiver,contact,amount}).then((data) => {
            trace("refund-退款申请-data", data);
            this.$router.back();
          })
            .catch((err) => {
              trace("退款申请-refund-err", err)
            })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    hkClickCancel() {
      this.$router.back();
    }
  },
  created() {},
  mounted() {
    this.balance1 = Number(this.balance).toFixed(2)
  }
};
</script>
<style lang="scss" scoped>
.card-body {
  max-width: 60%;
  margin: 0 auto;
  .buttom-btn-box{
    margin: 40px;
    text-align: center;
  }
}
</style>

